<template>
	<Page>
		<Topbar hideMenu @scanCode="scanCode" />
		<Content>
			<Panel>
				<view class="left">
					<MyInfo :data="workInfo" backUrl="/pages/workbench/report/index"
						@openCuttingPlan="openCuttingPlan" />
				</view>
				<FormWrap header title="生产提报" height="67vh">
					<u--form :labelPosition="labelPosition" labelAlign="left" :model="model" :rules="rules" ref="uForm"
						labelWidth="12rem" :labelStyle="{'margin-bottom' : labelPosition === 'top' ? '2rem' : '0'}"
						style="padding: 0 5rem;">
						<view class="sub-title">
							提报内容
						</view>
						<u-row justify="space-between">
							<u-col span="5">
								<u-form-item label="班次时间" prop="shiftTime" required class="label-fwn">
									<DatePicker v-model="model.shiftTime" @change="shiftTimeChange" />
								</u-form-item>
							</u-col>
							<u-col span="5">
								<u-form-item label="班次" prop="shiftId" required class="label-fwn">
									<SingleSelect v-model="model.shiftId" :list="shifts" mode="single" />
								</u-form-item>
							</u-col>
						</u-row>
						<u-row justify="space-between" v-if="workInfo.cuttingPlanCode">
							<u-col span="5">
								<u-form-item label="卷号" prop="rollNumber" required class="label-fwn">
									<SingleSelect v-model="model.rollNumber" :list="rollList" mode="single" />
								</u-form-item>
							</u-col>
							<u-col span="5">
								<u-form-item label="卷重" prop="rollWeight" required class="label-fwn">
									<InputNumberField v-model.number="model.rollWeight" :decimal="3" :halfAdjust="false"
										:min="0" :max="99999999.999">
									</InputNumberField>
								</u-form-item>
							</u-col>
						</u-row>
						<u-row justify="space-between">
							<u-col span="5">
								<u-form-item label="提报方式" prop="reportingMethod" required class="label-fwn">
									<uni-data-select v-model="model.reportingMethod" :modelValue="model.reportingMethod"
										:localdata="reportingMethods" format="{label}" :clear="false" placeholder="请选择"
										:disabled="!!workInfo.cuttingPlanCode"></uni-data-select>
								</u-form-item>
							</u-col>
							<u-col span="5">
								<!-- {{workInfo.cuttingPlanCode}}---{{model.reportedQuantity}} -->
								<u-form-item :label="`${model.reportingMethod==='按数量'?'入库数量':'入库重量'}`"
									prop="reportedQuantity" required class="label-fwn">
									<InputNumberField v-model.number="model.reportedQuantity" :min="0" :max="99999999"
										:decimal="3" :disabled="true"
										:placeholder="workInfo.cuttingPlanCode?'自动计算': '请输入'">
										<template slot="suffix" v-if="model.reportingMethod==='按重量'">
											{{ workInfo.weightUnit }}
										</template>
									</InputNumberField>
								</u-form-item>
							</u-col>
						</u-row>
						<u-row justify="space-between">
							<u-col span="5">
								<u-form-item label="入库仓库" prop="wareHouse" required class="label-fwn">
									<uni-data-select v-model="model.warehouseId" :modelValue="model.warehouseId"
										:localdata="wareHouses" @change="wareChange" format="{label}" :clear="false"
										placeholder="请选择"></uni-data-select>
								</u-form-item>
							</u-col>
							<u-col span="5">
								<u-form-item label="备注" prop="remarks" class="label-fwn">
									<InputField v-model="model.remarks" :maxlength="100" />
								</u-form-item>
							</u-col>
						</u-row>
						<u-row justify="space-between" v-if="!workInfo.cuttingPlanCode">
							<u-col span="5">
								<u-form-item label="包规" prop="specificationsNumber" class="label-fwn">
									<InputNumberField :disabled="true" :decimal='2' placeholder=''
										v-model="workInfo.specificationsNumber" />
								</u-form-item>
							</u-col>
							<u-col span="5">
								<u-form-item label="包数" prop="packages1" class="label-fwn">
									<InputNumberField placeholder='' :disabled="true" v-model="model.packages1" />
								</u-form-item>
							</u-col>
						</u-row>
						<u-row justify="space-between" v-if="!workInfo.cuttingPlanCode">
							<u-col span="5">
								<u-form-item label="尾箱数" prop="packages2" class="label-fwn">
									<InputNumberField placeholder='' :decimal='3' :disabled="true"
										v-model="model.packages2" />
								</u-form-item>
							</u-col>
						</u-row>
						<view class="sub-title">
							操作人员
						</view>
						<u-row justify="space-between">
							<u-col span="5">
								<u-form-item label="操作工" prop="operators" class="label-fwn">
									<RemoteMultipleSelect :value="model.operators" requestMethod="get"
										requestUrl="/dms/mobile/getUserNameList" :requestParams="{pageNum: 1,
                    pageSize: 99999}" :initalItemProptities="{num: 0}" @input="changeOperators"
										:defaultSelected="defaultSelected" valueName="value" />
								</u-form-item>
							</u-col>
						</u-row>

						<u-row justify="space-between" v-for="(item, index) in model.operators" :key="index">
							<template v-if="!workInfo.cuttingPlanCode">
								<view class="icon_box">
									<view class="delicon" @click="deleteThis(index)">
										<view class="berfore"></view>
									</view>
								</view>
								<u-col span="5" v-if="!workInfo.cuttingPlanCode">
									<u-form-item :label="`操作工`" class="label-fwn">
										<InputField v-model="model.operators[index].item.name" :disabled="true" />
									</u-form-item>
								</u-col>
								<u-col span="5" offset="1" v-if="!workInfo.cuttingPlanCode">
									<u-form-item :label="`提报数量`" :prop="`model.operators[${index}].num`"
										:rules="subRules.num" required class="label-fwn">
										<InputNumberField v-model="model.operators[index].num" :decimal="3"
											:halfAdjust="false" :min="0" :max="99999999.999"
											@input="changeOperatorsNum">
											<template slot="suffix" v-if="model.reportingMethod==='按重量'">
												{{ workInfo.weightUnit }}
											</template>
										</InputNumberField>
									</u-form-item>
								</u-col>
							</template>

						</u-row>

					</u--form>
					<template slot="footer">
						<Button large @click="open2">
							历史记录
						</Button>
						<Button large type="primary" :loading="repLoading" @click="open1" style="margin-left:3rem;">
							提交
						</Button>
					</template>
				</FormWrap>
			</Panel>
		</Content>
		<Modal title="确认提交吗？" ref="popup1" @confirm="confirm1" />
		<Modal title="历史提报记录" ref="popup2" width="90%" noComfirm>
			<view class="table-demo">
				<view class="table">
					<view class="table-loading" v-if="loading">
						<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
					</view>
					<view class="table-tr">
						<view class="table-th">班次</view>
						<view class="table-th">物料编号</view>
						<view class="table-th" style="min-width: 200px;">物料名称</view>
						<view class="table-th">提报方式</view>
						<view class="table-th">提报数量</view>
						<view class="table-th">打印余量</view>
						<view class="table-th">批次号</view>
						<view class="table-th">状态</view>
						<view class="table-th">班次日期</view>
						<view class="table-th">操作工</view>
						<view class="table-th" style="min-width: 100px;">提报时间</view>
						<view class="table-th" style="min-width: 180px;" v-if="!workInfo.cuttingPlanCode">操作</view>
					</view>
					<view class="table-tr table-empty" v-if="tableData.length === 0">
						暂无数据
					</view>
					<view class="table-tr" v-for="(item, index) in tableData" :key="index"
						v-if="tableData.length !== 0">
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.shift || '--' }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.materialCode || '--' }}
							</view>
						</view>
						<view class="table-td" style="min-width: 200px;">
							<view class="text-overflow-ellipsis">
								{{ item.materialName || '--' }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.reportedQuantity }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.reportingMethod || '--' }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.labelRemainingQuantity.toFixed(3) }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.batchNumber }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.status || '--'}}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.shiftTime || '--'}}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.operator || '--'}}
							</view>
						</view>
						<view class="table-td" style="min-width: 100px;">
							<view class="text-overflow-ellipsis">
								{{ item.reportingTime || '--' }}
							</view>
						</view>
						<view class="table-td action" style="min-width: 180px;" v-if="!workInfo.cuttingPlanCode">
							<Button small text style="padding: 0;" @click="open3(item,'报工打印')">打印标签</Button>
							<Button v-if="$has('supplementPrint')" small text style="padding: 0;margin-left: 10px;"
								@click="open3(item,'报工补印')">补印标签</Button>
						</view>
					</view>
				</view>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="change" />
				</view>
			</view>
		</Modal>
		<ModalCuttingPlan ref="modalCuttingPlan" @openModalPrintLabel="openModalPrintLabel"></ModalCuttingPlan>
		<ModalPrintLabel ref="modalPrintLabel"></ModalPrintLabel>
	</Page>
</template>

<script>
	var that;
	import MyInfo from "./info/index.vue";
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Empty from "@/components/empty/index.vue";
	import Button from "@/components/button/index.vue";
	import FormWrap from '@/components/formWrap/index.vue';
	import InputField from '@/components/formField/inputField/index.vue';
	import InputCaptcheField from '@/components/formField/inputCaptcheField/index.vue';
	import InputNumberField from '@/components/formField/inputNumberField/index.vue';
	import NumberBoxField from '@/components/formField/numberBoxField/index.vue';
	import RemoteMultipleSelect from '@/components/formField/remoteMultipleSelect/index.vue';
	import SingleSelect from '@/components/formField/singleSelect/index.vue';
	import DatePicker from '@/components/formField/datePicker/index.vue';
	import Modal from '@/components/modal/index.vue';
	import fetch from "@/utils/fetch";
	import wmsFetch from "@/utils/wmsFetch";
	import ModalCuttingPlan from '@/components/operate/modal-material-cutting-plan/index.vue';
	import ModalPrintLabel from '@/components/operate/modal-print-label/index.vue';
	import util from "@/utils/util.js";
	import {
		getUserInfo,
		getDevice
	} from "@/store/user.js";
	import filter from "@/utils/filter";
	import {
		timeIsBetweenTimeRange
	} from "@/utils/date";


	export default {
		components: {
			MyInfo,
			Page,
			Topbar,
			Content,
			Panel,
			Empty,
			Button,
			FormWrap,
			InputField,
			InputCaptcheField,
			InputNumberField,
			NumberBoxField,
			RemoteMultipleSelect,
			SingleSelect,
			DatePicker,
			Modal,
			ModalCuttingPlan,
			ModalPrintLabel
		},
		data() {
			return {
				locationItem: {},
				params: {},
				tableData: [],
				pageSize: 9,
				pageCurrent: 1,
				total: 0,
				loading: false,
				repLoading: false,
				workInfo: {},
				labelPosition: 'left',
				shifts: [],
				shifts2: [],
				reportingMethods: [{
						label: '按数量',
						value: '按数量',
					},
					{
						label: '按重量',
						value: '按重量',
					}
				],
				wareHouses: [],
				rollList: [],
				defaultSelected: [],
				model: {
					operators: [{
						value: getUserInfo().userId,
						num: 0,
						item: {
							name: getUserInfo().username,
						}
					}],
					operatorNumber: [],
					shift: '',
					wareHouse: '仓库1',
					reportingTime: this.dayjs().format('YYYY-MM-DD hh:mm:ss'),
					reportingMethod: '按数量',
					shiftId: '',
					rollNumber: '',
				},
				rules: {
					'shiftId': {
						type: 'number',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					},
					'rollNumber': {
						type: 'string',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					},
					'rollWeight': {
						type: 'number',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change'],
					},
					'reportingMethod': {
						type: 'string',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					},
					'warehouse': {
						type: 'string',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					},
					'reportedQuantity': {
						type: 'number',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					},
					'operators': {
						type: 'array',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					},
				},
				subRules: {
					num: {
						type: 'number',
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		watch: {
			'model.rollNumber': {
				handler(value) {
					if (value) {
						const rollWeight = this.rollList.find(item => item.value === value).data.rollWeight;
						// console.log('rollWeight=>', rollWeight);
						this.$set(this.model, 'rollWeight', rollWeight);
					}
				},
				deep: true
			},
			// 'workInfo.specificationsNumber': {
			//              handler(value) {
			//                  if (value) {
			//                     this.model.packages1=Math.trunc(this.model.reportedQuantity/(this.workInfo.specificationsNumber-0));
			//                     this.$set(this.model, 'packages2', this.model.reportedQuantity%(this.workInfo.specificationsNumber-0).toFixed(2));//尾箱数
			//                  }
			//              },
			//              deep: true
			//          },
			'model.rollWeight'(value) {
				if (value == 0) {
					this.$set(this.model, 'reportedQuantity', 0);
				} else {
					//卷重÷卷料料宽*条料料宽
					const data = this.rollList.find(item => item.value === this.model.rollNumber).data;
					const reportedQuantity = parseFloat(value / data.rollMaterialWidth * data.materialWidth);
					this.$set(this.model, 'reportedQuantity', Math.floor(reportedQuantity * Math.pow(10, 3)) / Math.pow(
						10, 3));

				}
			}
		},
		methods: {
			deleteThis(index) {
				this.model.reportedQuantity -= this.model.operators[index].num
				this.model.operators.splice(index, 1);
				this.defaultSelected = JSON.parse(JSON.stringify(this.model.operators))
				this.model.packages1 = Math.trunc(this.model.reportedQuantity / (this.workInfo.specificationsNumber -
					0));
				const packages2 = util.numberFormatNoFixed(this.model.reportedQuantity % this.workInfo
					.specificationsNumber, 3)
				this.$set(this.model, 'packages2', packages2); //尾箱数
			},
			scanCode(result) {
				const info = result.split(';');
				//info[0] 场景 scene_01 MES自有码
				//info[1] 时间戳
				//info[2] 物料编号
				//info[3] 生产数量
				//info[4] 批次号
				//info[5] 牌号
				if (info[0] === 'scene_01') {
					this.$set(this.model, 'reportedQuantity', info[3] || 0);
				} else {
					wmsFetch('post', '/warehouseService/getStockOutLabel', null, {
						corpId: 'hx',
						data: {
							serialNo: info[0]
						}
					}).then((res) => {
						if (res && res.length !== 0) {
							const data = res[0];
							this.$set(this.model, 'reportedQuantity', data.labelQty || 0);
						}
					});
				}
			},
			openCuttingPlan() {
				this.$refs['modalCuttingPlan'].open(this.workInfo.cuttingPlanCode);
			},
			openModalPrintLabel(item) {
				this.$refs['modalPrintLabel'].open(item);
			},
			getWorkOrderInfo(workOrder) {
				fetch('get', '/dms/mobile/getRoductionReporting', {
					workOrder
				}).then((res) => {
					this.workInfo = res;
					if (this.workInfo.cuttingPlanCode && (this.workInfo.cuttingPlanList && this.workInfo
							.cuttingPlanList.length !== 0)) {
						this.rollList = this.workInfo.cuttingPlanList.map(item => {
							return {
								label: item.rollNumber,
								value: item.rollNumber,
								data: item
							}
						});
						this.model.rollNumber = this.rollList[0].value;
					} else {
						this.rollList = [];
					}
				});
			},
			// changeRollNumber(value) {
			//     const rollWeight = this.rollList.find(item => item.value === value).data.rollWeight;
			//     this.$set(this.model, 'rollWeight', rollWeight);
			// },
			changeOperators(value) {
				for (let i = 0; i < value.length; i++) {
					const arg = this.model.operators.find(item => item.value == value[i].value)
					if (!arg) {
						this.model.operators.push(value[i])
					}
				}
				this.defaultSelected = JSON.parse(JSON.stringify(this.model.operators))
				if (!this.workInfo.cuttingPlanCode) this.changeOperatorsNum();
			},
			changeOperatorsNum() {
				this.model.reportedQuantity = this.model.operators.map(item => Number(item.num)).reduce((total, item) =>
					total +
					item);
				this.model.packages1 = Math.trunc(this.model.reportedQuantity / (this.workInfo.specificationsNumber -
					0));
				const packages2 = util.numberFormatNoFixed(this.model.reportedQuantity % this.workInfo
					.specificationsNumber, 3)
				this.$set(this.model, 'packages2', packages2); //尾箱数

			},
			open1() {
				this.$refs['uForm'].validate().then((valid) => {
					if (valid) this.$refs.popup1.open()
				});
			},
			open2() {
				this.getData(1);
				this.$refs.popup2.open()
			},
			open3(item, type) {
				this.$refs['modalPrintLabel'].open(item, type);
			},
			confirm1() {
				const that = this;
				console.log(this.model.operators, 'operators')
				const operatorNumber = this.model.operators.map(item => item.value);
				let data = {
					...this.model,
					operatorNumber,
					workCode: this.workInfo.workCode,
					shiftTime: that.dayjs(that.model.shiftTime).format('YYYY-MM-DD')
				};
				delete data.packages1;
				delete data.packages2;

				if (!this.workInfo.cuttingPlanCode) {
					delete data.operators;
					delete data.reportedQuantity;
					data.quantityS = this.model.operators.map(item => item.num);

					let result = true;
					for (let i = 0; i < data.quantityS.length; i++) {
						if (data.quantityS[i] == 0) {
							result = false;
						}
					}
					if (!result) {
						this.$toast('提报数量不能为空');
						return;
					}
				}
				this.repLoading = true;
				setTimeout(function() {
					that.repLoading = false;
				}, 1000);
				console.log(JSON.stringify(data), 'data')
				fetch('post', '/dms/mobile/addReporting', null, data).then(() => {
					this.repLoading = false;
					this.$toast('提报成功');
					this.resetNum()
					this.getWorkOrderInfo(that.params.workOrder);
					// setTimeout(function() {
					// 	uni.redirectTo({
					// 		url: 'index?workCode=' + that.params.workOrder
					// 	})
					// }, 1500);
					// uni.navigateBack()
					// uni.navigateBack({
					// 	delta: 1
					// })
					// this.goto('/pages/workbench/report/index');
				}).catch((res) => {
					this.repLoading = false;
				});
			},
			resetNum() {
				for (let i = 0; i < this.model.operators.length; i++) {
					this.$set(this.model.operators[i], 'num', 0)
				}
			},
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
			shiftTimeChange() {
				const that = this;
				this.getShiftList();
			},
			getShiftList(status) {
				fetch("get", "/dms/mobile/getShiftList", {
					deviceNo: getDevice().deviceNo,
					shiftDate: status ? '' : this.dayjs(this.model.shiftTime).format('YYYY-MM-DD'),
				}).then((res) => {
					this.shifts = res.map((item) => ({
						label: item.shift,
						value: item.id,
						scheduleDate: item.scheduleDate,
					}));
					if (this.shifts.length !== 0) {
						// const has = res.find(item => timeIsBetweenTimeRange(filter.formatCurrentTimeDuration(),
						//     item.shiftStartTime,
						//     item.shiftEndTime));
						// if (has)
						//     this.model.shiftId = has.id;
						// else
						//     this.model.shiftId = this.shifts[0].value;
						this.model.shiftId = this.shifts[0].value;
						if (status) this.$set(this.model, 'shiftTime', this.dayjs(this.shifts[0].scheduleDate)
							.valueOf());
					} else {
						this.model.shiftId = null;
					}
				});
			},
			getWareHouses() {
				fetch("get", "/dms/mobileEnd/getQualifiedWarehouse", {
					deviceNo: getDevice().deviceNo,
				}).then((res) => {
					if (res) {
						this.wareHouses = [{
							label: res.backupName,
							value: res.id,
						}];
						this.model.wareHouse = this.wareHouses[0].label;
						this.model.warehouseId = this.wareHouses[0].value;
					} else {
						this.model.wareHouse = '';
						this.model.warehouseId = null;
					}
				});
			},
			wareChange(val) {
				const arg = this.wareHouses.find(item => item.value == this.model.warehouseId);
				this.model.wareHouse = arg.label
			},
			// 分页触发
			change(e) {
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				const workCode = this.params.workOrder;
				fetch('get', '/dms/mobile/getReporting', {
					pageSize: this.pageSize,
					pageNum: this.pageCurrent,
					workCode
				}).then((res) => {
					this.loading = false;
					this.tableData = res.records;
					this.total = res.total;
				});
			},
		},
		onLoad(params) {
			console.log(params);
			that = this;
			this.params = params;
			this.getWorkOrderInfo(params.workOrder);
			this.getShiftList(true);
			this.getWareHouses();
			// setTimeout(function() {
			// 	uni.redirectTo({
			// 		url: 'index?workCode=' + that.params.workOrder
			// 	})
			// }, 5000);

		}
	};
</script>

<style scoped lang="scss">
	.left {
		flex: 0 auto;
		width: 50rem;
		background: #f8f8fa;
	}

	.right {
		flex: 1;
		background-color: red;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 3rem 4rem 5rem;
	}

	.icon_box {
		display: flex;
		width: 100%;
		// align-items: center;
		// text-align: center;
		// justify-content: center;
	}

	.delicon {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		display: flex;
		background-color: red;
		align-items: center;
		justify-content: center;
	}

	.berfore {
		width: 2.6rem;
		height: 1rem;
		border-radius: 1px;
		background-color: white !important;
		z-index: 1;
		// width: 3rem;
		// height: 1rem;
	}

	.label-fwn {
		/deep/ .u-form-item__body__left__content__label {
			font-weight: normal !important;
		}
	}

	.sub-title {
		padding: 3rem 0;
		font-size: 2.2rem;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		margin: 2rem 0;
	}

	/deep/ .form-wrap .body {
		padding-top: 0;
	}

	.table-demo {
		// flex: 1;
		display: flex;
		flex-direction: column;
	}

	.table {
		width: 100%;
		display: flex;
		flex-direction: column;
		border: 1px solid #ecf0f2;
		border-radius: 2rem;
		// overflow: hidden;
		overflow-x: scroll !important;
		position: relative;

		.table-loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
		}

		.table-empty {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rem 0;
			font-size: 2rem;
		}

		.table-tr {
			display: flex;
			flex-direction: row;
			// border-top: 1px solid #ecf0f2;
		}

		.table-th {
			// flex: 1;
			// width: 500px;
			min-width: 100px;
			background: #edf1f3;
			font-size: 2rem;
			text-align: center;
			padding: 2rem 0;
			border-top: 1px solid #ecf0f2;
			// overflow: hidden;
		}

		.action {
			display: flex;
			// background-color: red;
			flex-direction: row;
			align-items: center;
			text-align: center;
			justify-content: center;
			justify-items: center;
		}

		.table-td {

			// flex: 1;
			min-width: 100px;
			font-size: 2rem;
			text-align: center;
			padding: 1.8rem 0;
			border-top: 1px solid #ecf0f2;
			// overflow: hidden;
		}

		.text-overflow-ellipsis {
			width: 80%;
			padding: 0;
			text-overflow: ellipsis;
			// overflow: hidden;
			white-space: nowrap;
			margin: 0 auto;
		}
	}

	/deep/ .uni-pagination-box {
		display: flex;
		justify-content: flex-end;
		margin-top: 2rem;
		font-size: 2rem;

		.uni-pagination__total {
			font-size: 2rem;
		}

		.uni-pagination__btn {
			font-size: 2rem;
		}

		.uni-pagination__num {
			font-size: 2rem;
		}

		.uni-pagination__num-tag {
			width: 6rem;
		}
	}
</style>